<template>
   <xdh-layout fixed :north="{height: 'auto'}" class="filter-list">
     <el-row slot="north">
        <xdh-panel title="搜索条件" icon="el-icon-menu">
    <template slot="tool">
       <div class="button">
           <el-input placeholder="请输入内容"  size="mini" v-model="input5" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
        </div>
    </template>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="分组:">
    <el-checkbox-group v-model="form.country" @change="countryChange">
    <el-button :size="checkboxSize" style="margin-right:10px;" @click="allCountry"
     :type="form.country.length === 0 ? 'primary': ''"
    >全部</el-button>
      <el-checkbox :size="checkboxSize" v-for="(item, idx) in groups"  :label="item.value" :key="idx"
      border>{{item.label}}</el-checkbox>
      <el-checkbox :size="checkboxSize" v-for="(item, idx) in moreGroups" v-if="showAllCountry" :label="item.value" :key="idx"
      border>{{item.label}}</el-checkbox>
    <el-button  :size="checkboxSize" style="margin-left:10px;" @click="showCountry" v-if="!showAllCountry && moreGroups.length > 0">
      展开更多
      <i class="iconfont icon-double-arrow-right"></i>
      </el-button>
    <el-button  :size="checkboxSize" style="margin-left:10px;" @click="collapseCountry" v-if="showAllCountry">
      收起
      <i class="iconfont icon-double-arrow-left"></i>
      </el-button>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="级别:">
    <el-checkbox-group v-model="form.level" @change="levelChange">
    <el-button  :size="checkboxSize" style="margin-right:10px;"
     :type="form.level.length === 0 ? 'primary': ''"
     @click="allLevel">全部</el-button>
      <el-checkbox :size="checkboxSize" v-for="(item, idx) in levels"  
      :label="item.value" :key="idx" border>{{item.label}}</el-checkbox>
      <el-checkbox :size="checkboxSize" v-for="(item, idx) in moreLevels" v-if="showAllLevel" 
      :label="item.value" :key="idx" border>{{item.label}}</el-checkbox>
    <el-button  :size="checkboxSize" style="margin-left:10px;" @click="showLevel" v-if="!showAllLevel && moreLevels.length > 0">
      展开更多
      <i class="iconfont icon-double-arrow-right"></i>
      </el-button>
    <el-button  :size="checkboxSize" style="margin-left:10px;" @click="collapseLevel" v-if="showAllLevel">
      收起
      <i class="iconfont icon-double-arrow-left"></i>
      </el-button>
    </el-checkbox-group>
  </el-form-item>
    </el-form>
  </xdh-panel>
     </el-row>
        <xdh-list-panel :load="loadData" :fit="mPanelFit" :state="state" ref="listPanel" :title="'人员列表'"
        :sizes="pageSizes" :size="20">
         <template slot-scope="scope">
           <div v-for="(group, idx) in state.list" :key="idx">
            <div class="group-title">
              <span class="group-name">
                {{group.groupName}}
                </span>
                <el-button type="default" class="group-btn" size="small" @click="groupDetail(group.groupId)">
                  更多
                   <i class="iconfont icon-double-arrow-right"></i>
                </el-button>
            </div>
            <filter-item v-for="(item, idy) in group.list" :item="item" :index="(pageInfo.page - 1)* pageInfo.limit + idy+1"  :key="idy">
            </filter-item>
            <div style="clear:both;"></div>
           </div>
         </template>
        </xdh-list-panel>
        <filter-page :groupId="currentGroup"></filter-page>
   </xdh-layout>
</template>
<script>
import XdhLayout from '@/widgets/xdh-layout';

import XdhPanel from '@/widgets/xdh-panel';
import personMixin from '@/base/mixin/person';
import groupMixin from '@/base/mixin/group';
import levelMixin from '@/base/mixin/level';
import XdhListPanel from '@/widgets/xdh-list-panel';
import FilterItem from '@/components/focusManage/filter-item';
import responseStyle from '@/helper/responseStyle';

export default {
  mixins: [personMixin, groupMixin, levelMixin, responseStyle],
  components: {
    XdhLayout,
    XdhPanel,
    XdhListPanel,
    FilterItem
  },
  props: {
    groupId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentGroup: '',
      checkboxSize: 'small',
      state: {
        total: 0,
        list: []
      },
      pageInfo: {
        page: 1,
        limit: 20
      },
      pageSizes: [20, 50, 100, 500],
      form: {
        country: [],
        level: []
      },
      showAllCountry: false,
      showAllLevel: false,
      countryMaxSize: 8,
      groups: [],
      moreGroups: [],
      levelMaxSize: 6,
      levels: [],
      moreLevels: []
    };
  },
  methods: {
    countryChange(obj) {
      this.$refs.listPanel.reload();
    },
    levelChange(obj) {
      this.$refs.listPanel.reload();
    },
    allCountry() {
      this.form.country = [];
      this.$refs.listPanel.reload();
    },
    allLevel() {
      this.form.level = [];
      this.$refs.listPanel.reload();
    },
    showCountry() {
      this.showAllCountry = true;
    },
    showLevel() {
      this.showAllLevel = true;
    },
    collapseCountry() {
      this.showAllCountry = false;
    },
    collapseLevel() {
      this.showAllLevel = false;
    },
    groupDetail(id) {
      this.currentGroup = id;
      this.$router.push('/focus-manage/filter-group/' + id);
    },
    loadData(page, limit) {
      this.pageInfo.page = page;
      this.pageInfo.limit = limit;
      let query = Object.assign(
        {},
        {
          page: page,
          limit: limit
        }
      );
      return this.getGroupList(query).then(res => {
        this.state = res;
        if (this.pageSizes[this.pageSizes.length - 1] < this.state.total) {
          this.pageSizes.push(this.state.total);
        }
      });
    }
  },
  created() {
    this.fetchGroup().then(res => {
      res.list.forEach((r, idx) => {
        if (idx >= this.countryMaxSize) {
          this.moreGroups.push({
            label: r.name,
            value: r.id
          });
        } else {
          this.groups.push({
            label: r.name,
            value: r.id
          });
        }
      });
    });
    this.fetchLevel().then(res => {
      res.list.forEach((r, idx) => {
        if (idx >= this.levelMaxSize) {
          this.moreLevels.push({
            label: r.name,
            value: r.id
          });
        } else {
          this.levels.push({
            label: r.name,
            value: r.id
          });
        }
      });
    });
  }
};
</script>
<style  type="text/scss" lang="scss" scoped>
.filter-list {
  .el-form-item {
    margin-bottom: 8px;
  }
}
.button {
  float: right;
}
.group-title {
  padding: 5px 20px;
  &:after {
    content: '';
    clear: both;
    display: block;
  }
  .group-name {
    background-color: #ff9900;
    color: #fff;
    box-shadow: 1px 1px 2px #ccc;
    float: left;
    padding: 5px 8px;
  }
  .group-btn {
    float: right;
  }
}
</style>